<template>
	<div id="videos">
		<div id="top" slot="header" class="clearfix header">
		    <span class="header-teaching"><i class="el-icon-tickets"></i>&nbsp;&nbsp;视频 <i class="el-icon-arrow-right"></i></span>
		    <span class="head">{{videoList.title}}</span>
		    <span style="float: right;" type="text" class="back" @click="back">返回</span>
		</div>
		<div class="video">
			<!--videoList.video_path||-->
			<video width="800" height="" id="my-video" class="video-js vjs-default-skin"  :src="(videoList.video_path||this.videos)" muted controls autoplay="autoplay" preload="auto">
				<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
					<param name="movie" value="myvideo.swf" />
					<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
				</object>
			</video>
		</div>
		<div class="class">
			<template>
			  <el-tabs v-model="activeName" >
			    <el-tab-pane label="课程目录" name="first">
			    	<div v-for="(item,index) in titleList" class="xian">
			    		<div class="title" >
			    			<span class="chapter">第{{index+1}}节</span>
			    			<span class="chapter-title">{{item.zjtitle}}</span>
			    		</div>
			    		<div class="sportcontent" v-for="(it,key) in item.get_video_bar">
							<img :src="it.icon_path" alt=""  @click="video(it.url)"/>
			    			<div>
			    				<div class="sporttitle" @click="video(it.url)">{{it.zjtitle}}</div>
			    				<div class="btn" @click="showCont(it.id)">详情</div>
			    			</div>
			    			<div class="sc">{{it.introduce}}</div>
			    			<!--v-html去掉多于的标签-->
			    			<div class="scontent" v-if="(it.id == currentId)" v-html="it.content"></div>
			    		</div>
			    	</div>
			    </el-tab-pane>
			    <el-tab-pane label="训练计划" name="second">
					<div style="font-size: 14px; padding-bottom: 20px;" v-html="videoContent.introduce"></div>
				</el-tab-pane>
			  </el-tabs>
			</template>
		</div>
	</div>
</template>

<script>
	import {videojs} from 'video.js'
	import 'videojs-contrib-hls'
	export default {
		props: {
			videoUrl: String,
			state: Boolean,
		},
		data(){
			return {
				//show:true,
				activeName:'first',
				show:false,
				videoList:[],
				titleList:[],
				currentId:'',
				videos:'',
				videoContent:'',
			}
		},
		methods:{
			//详情显示隐藏
			showCont(id){
				this.currentId = id
			},
			//返回到上一页
			back(){
				this.$router.push({name:'video'})
			},
			// 获取视频详情
			getvideoDetail(id){
				var id = this.$route.params.id
				this.$http.post('/api/video/videoDetail',{
					id:id
				}).then(res=>{
					this.videoList = res.data.data
					this.titleList = res.data.data.get_table_chapter

				})
			},
			//播放对应视频
			video(url){
				this.videos = url
				this.videoList.video_path = ''
				document.getElementById("videos").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
			},

			//视频详情训练计划
			getVideoContent(id){
				var id = this.$route.params.id
				this.$http.post('/api/video/introduce',{
					id:id
				}).then(res=>{
					this.videoContent = res.data.data
				})
			}
		},
		created(){
			this.getvideoDetail()
			this.getVideoContent()
		},

	}
</script>
<style>
	main.el-main {
		padding: 0;
	}
</style>
<style lang="less" scoped>
	#videos {
		clear: both;
		#top {
			width:-webkit-calc(100% - 220px);
			width:-moz-calc(100% - 220px);
			width:calc(100% - 220px);
		}
	}
	.header {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: fixed;
		z-index: 99;
		.header-teaching {
			background-color:#00b02d;
			display: inline-block;
			height: 50px;
			padding: 0 20px;
			color: #fff;
		}
		.back {
			display:inline-block;
			background:#9cbf83 ;
			line-height: 50px;
			padding:0 20px;
			border-radius: 5px;
			cursor:default;
			color: #fff;

		}
	}
	.video{
		padding: 80px 50px;
		padding-bottom: 20px;
		video.video-js.vjs-default-skin {
			width: 100%;
			height:600px;

		}
	}
	.class {
		padding:0 50px;
		.xian {
			.title {
				width: 100%;
				height: 40px;
				line-height: 40px;
				background: #cfebd2;
				.chapter {
					display: inline-block;
					background-color: #ef6d6d;
					padding: 0 20px;
					font-weight: 700;
				}
				.chapter-title {
					font-weight: 700;
					padding-left: 10px;
				}
			}
			.sportcontent {
				margin:20px 0;
				position: relative;
				padding-bottom: 10px;
				border-bottom: 1px dashed #ccc;
				img {
					width: 200px;
					height: 130px;
					cursor: pointer;
				}
				.sporttitle {
					position: absolute;
					top: 0;
					left: 200px;
					padding-left:20px;
					font-weight: 700;
					cursor: pointer;
				}
				.btn {
					position: absolute;
					top: 0;
					right: 50px;
					background: #69aae0;
					padding: 3px 25px;
					cursor: default;
					border-radius: 3px;
				}
				.sc {
					position: absolute;
					top: 30px;
					left: 200px;
					padding-right: 150px;
					padding-left: 20px;
					font-size: 14px;
				}
				.scontent {
					font-size: 14px;
				}
			}
		}

	}
</style>
